<template>
    <div class="h-100 overflow-ellipsis">
        <!-- 顶部搜索框--开始 -->
        <div class="w-100 h-5" style="border-bottom: 1px solid rgb(235, 239, 246); display: flex; height: 8%; align-items: center">
            <div class="ml-16 mr-16 fs-24">
                <span style="height: 50px; line-height: 50px; font-weight: bold">职位管理</span>
            </div>
            <div class="ml-16 mr-16 fs-12" style="height: 50px; line-height: 50px; font-weight: bold; font-weight: normal; color: rgb(153, 153, 153)">
                企业发布职位后，平台或学校审核通过后，前台展示
            </div>
            <div class="float-right" style="display: flex; justify-content: flex-end; margin-left: auto">
                <Select class="text-left ml-12" placeholder="请选择城市">
                    <Option value="beijing">New York</Option>
                    <Option value="shanghai">London</Option>
                    <Option value="shenzhen">Sydney</Option>
                </Select>
                <Input class="text-left ml-12" placeholder="请输入学校名称" />
                <Button class="ml-0 text-left mr-12" type="primary">搜索</Button>

                <Button class="ml-0 text-left mr-12" type="primary">职位发布</Button>
            </div>
        </div>
        <!-- 顶部搜索框--结束 -->

        <!-- 表格数据加载--开始 -->
        <div class="w-95 h-85 m-auto mt-16 overflow-auto">
            <!-- 样例数据--开始 -->

            <!-- 单个数据渲染--开始 -->
            <div class="w-100 h-10 d-flex mb-8 mt-8 pb-12 fs-12" style="border-bottom: 1px solid rgb(235, 239, 246)">
                <!-- 单个数据左侧渲染--开始 -->
                <div class="w-50 pl-16">
                    <!-- 顶部数据--开始 -->
                    <div class="d-flex align-items-center">
                        <div class="mr-8">
                            <a href="#">项目运营（平台推广）</a>
                        </div>
                        <div class="mr-8">发布天数：3天</div>
                        <div class="mr-8 fs-12">
                            <div style="background-color: rgba(255, 228, 186, 0.4); color: rgb(255, 125, 0)"><span class="mr-8 ml-8">草稿-待上架</span></div>
                        </div>
                    </div>
                    <!-- 顶部数据--结束 -->

                    <!-- 中部数据--开始 -->
                    <div class="d-flex">
                        <div class="mr-8">6k-8k |</div>
                        <div class="mr-8">本科及以上 |</div>
                        <div class="mr-8">招聘 1人 |</div>
                        <div class="mr-8">教育学</div>
                        <div class="mr-8">心理学</div>
                        <div class="mr-8">计算机</div>
                    </div>
                    <!-- 中部数据--结束 -->

                    <!-- 底部数据--开始 -->
                    <div class="d-flex">
                        <div class="mr-8">保存：2023-10-19 09:17</div>
                    </div>
                    <!-- 底部数据--结束 -->
                </div>
                <!-- 单个数据左侧渲染--结束 -->

                <!-- 单个数据右侧渲染--开始 -->
                <div class="w-50 h-100">
                    <!-- 左侧数据--开始 -->
                    <div class="h-100 w-50 d-flex align-items-center justify-content-center float-left">待审核</div>
                    <!-- 左侧数据--结束 -->

                    <!-- 右侧数据--开始 -->
                    <div class="h-100 w-50 align-items-center justify-content-center d-flex">
                        <div class="mr-12 ml-12">编辑</div>
                        <div class="mr-12 ml-12">上架</div>
                        <div class="mr-12 ml-12">删除</div>
                    </div>
                    <!-- 右侧数据--结束 -->
                </div>
                <!-- 单个数据右侧渲染--结束 -->
            </div>
            <!-- 单个数据渲染--结束 -->
        </div>
        <!-- 样例数据--结束 -->
        <!-- 表格数据加载--结束 -->

        <!-- 底部--分割线--开始-->
        <hr class="w-100" style="border: 0.5px solid rgb(235, 239, 246)" />
        <!-- 底部--分割线--结束-->

        <!-- 分页--开始 -->
        <div class="w-100 mt-8">
            <Page class="m-auto w-50" :total="100" show-sizer show-elevator />
        </div>
        <!-- 分页--结束 -->
    </div>
</template>

<script>
export default {};
</script>

<style>
.ivu-tag-orange {
    height: 100%;
    line-height: 100%;
    border-color: #ffd59100 !important;
}
</style>
